<template>
  <div class="login-wrap">
    <div class='ms-background'><img src="../../../static/img/login-logo.png.png"></img></div>
    <div class="ms-login">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input @keyup.native="enterEvent($event, 'ruleForm')" v-model.trim="ruleForm.username"  placeholder="账号" @keyup.enter.native="next()"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input  type="password" placeholder="密码"  v-model.trim="ruleForm.password"
                    @keyup.enter.native="submitForm()" ref="password"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import apiLogin from '../../api/loginHome/apiLogin'
  import md5 from 'js-md5'
  export default {
    data: function () {
      var checkString = (rule, value, callback) => {
        value = value.replace(/[^\w\u4e00-\u9fa5\s]/g, '')
        callback()
      }
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            { validator: checkString, trigger: 'blur' }
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      enterEvent (ev, form) {
        this[form].username = this[form].username.replace(/[^\w\u4e00-\u9fa5\s]/g, '')
      },
      submitForm () {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            const self = this
            let para = {
              header: JSON.stringify({}),
              body: JSON.stringify({
                'username': self.ruleForm.username,
                // 'password': self.ruleForm.password
                'password': md5(self.ruleForm.password)
              })
            }
            sessionStorage.setItem('username', self.ruleForm.username)
            apiLogin.toLogin(para).then(res => {
              console.log('toLogin回参')
              console.log(res)
              if (res.body.result === 1000) {
                sessionStorage.setItem('adminId', res.body.content.user.adminId)
                sessionStorage.setItem('adminName', res.body.content.user.adminName)
                sessionStorage.setItem('position', res.body.content.user.position)
                sessionStorage.setItem('roleId', res.body.content.user.roleId)
                sessionStorage.setItem('token', res.header.token)
                // self.$router.push('/home')
                self.$router.push('/platView')
              } else {
                self.$message({
                  message: res.body.resultDesp,
                  type: 'error'
                })
              }
            }).catch(error => {
              console.log(error)
              self.$message({
                message: '登录失败，请检查网络连接！',
                type: 'error'
              })
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      /* setRole (role) {
        switch (role) {
          case '客服':
            let role0 = 'kefu'
            sessionStorage.setItem('ms_username', role0)
            break

          default:
            alert('角色出错')
            this.$router.push('/login')
        }
      }, */
      next () {
        let nextInput = this.$refs['password'].$el.children[0]
        console.log(nextInput)
        nextInput.focus()
      }
//      checkName (username) {
//        console.log(username)
//
//        if (username === 'caiwu' || username === 'yingyun' || username === 'caiwuzongzhang' || username === 'kefu' || username === 'diaodu' || username === 'xitong') {
//          return true
//        } else {
//          return false
//        }
//      }
    }
  }
</script>
<style>
  .ms-login .el-input__inner{
    width: 280px;
    height:32px;
    border-radius: 5px
  }
  .ms-login .el-form-item {
    margin-bottom:20px
  }
  .ms-login .el-button {
    width: 280px;
    height: 36px;
  }
</style>
<style scoped>
  .login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background:url("../../../static/img/logoin-bg.png.jpg") no-repeat;
    background-size: 100%
  }
  .ms-background{
    width:100%;
    position: relative;
    text-align: center;
    padding-top:200px
  }

  .ms-title {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -230px;
    text-align: center;
    font-size: 30px;
  }

  /* .ms-login {
    width:100%;
    position: relative;
    text-align: center;
    padding-top:10px;
  } */
  .ms-login {
    position: relative;
    left: 50%;
    width:280px;
    margin: 0 0 0 -140px;
    border-radius: 5px;
  }

  .login-btn {
    text-align: center;
  }

  .login-btn button {
    width: 280px;
    height: 32px;
    padding-top: 10px;
  }
</style>